<template>
  <div class="" style="width:100%">
    <h2>供应商/投标人/受让方登录信息</h2>

    <a-form-model ref="form" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-model-item label="供应商/投标人/受让方类别" prop="legalType">
        <a-select
          v-model="form.legalType"
          placeholder="请选择供应商/投标人/受让方类别"
          mode="multiple"
          :disabled="!canFix"
        >
          <a-select-option v-for="opt in legal_type.legal_type" :key="opt.value" :value="opt.value">{{
            opt.text
          }}</a-select-option>
        </a-select>
      </a-form-model-item>

      <a-form-model-item label="供应商/投标人/受让方性质" prop="legalNature">
        <a-tree-select
          v-model="form.legalNature"
          :disabled="!canFix"
          show-search
          style="width: 100%"
          :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
          placeholder="请选择供应商/投标人/受让方性质"
          allow-clear
          tree-default-expand-all
          :tree-data="treeData['A02']"
        >
        </a-tree-select>
      </a-form-model-item>

      <a-form-model-item label="是否外资参股" prop="isForeign">
        <a-radio-group v-model="form.isForeign" :disabled="!canFix">
          <a-radio value="0">是</a-radio>
          <a-radio value="1">否</a-radio>
        </a-radio-group>
      </a-form-model-item>

      <a-form-model-item label="是否上市" prop="isStock">
        <a-radio-group v-model="form.isStock" :disabled="!canFix">
          <a-radio value="0">是</a-radio>
          <a-radio value="1">否</a-radio>
        </a-radio-group>
      </a-form-model-item>

      <a-form-model-item label="国别/地区" prop="countryRegion">
        <a-select v-model="form.countryRegion" placeholder="请选择国别/地区" :disabled="!canFix">
          <a-select-option v-for="opt in legal_type.country" :key="opt.value" :value="opt.value">{{
            opt.text
          }}</a-select-option>
        </a-select>
      </a-form-model-item>

      <a-form-model-item label="注册资金" prop="regCapital">
        <a-input-group compact>
          <a-input
            v-model="form.regCapital"
            placeholder="请输入注册资金"
            style="width: calc(100% - 160px);"
            :disabled="!canFix"
          />
          <span
            style="width: 40px; text-align: center; display: inline-flex;align-items:center;height:32px;justify-content:center;"
            >万元</span
          >
          <!-- 移动到此处 -->
          <a-select
            v-model="form.regCapCurrency"
            :disabled="!canFix"
            placeholder="请选择货币类型"
            style="width: 80px;"
            :options="legal_type['money_type']"
          >
          </a-select>
        </a-input-group>
      </a-form-model-item>

      <a-form-model-item v-if="form.regCapCurrency!=='1'" label="缴款当日折合人民币" prop="regRmb">
        <a-input v-model="form.regRmb" placeholder="请输入缴款当日折合人民币" :disabled="!canFix" />
      </a-form-model-item>

      <a-form-model-item label="所在地区" prop="regionCode">
        <j-area-linkage v-model="form.regionCode" type="cascader" :disabled="!canFix" />
      </a-form-model-item>

      <a-form-model-item label="是否有进出口权" prop="isImport">
        <a-radio-group v-model="form.isImport" :disabled="!canFix">
          <a-radio value="0">是</a-radio>
          <a-radio value="1">否</a-radio>
        </a-radio-group>
      </a-form-model-item>

      <a-form-model-item label="注册地址" prop="legalUnitAddress">
        <a-input v-model="form.legalUnitAddress" placeholder="请输入注册地址" :disabled="!canFix" />
      </a-form-model-item>

      <a-form-model-item label="企业办公通讯地址" prop="legalAddress">
        <a-input v-model="form.legalAddress" placeholder="请输入企业办公通讯地址" :disabled="!canFix" />
      </a-form-model-item>

      <a-form-model-item label="邮政编码" prop="legalZipCode">
        <a-input v-model="form.legalZipCode" placeholder="请输入邮政编码" :disabled="!canFix" />
      </a-form-model-item>

      <a-form-model-item label="公司传真" prop="legalFax">
        <a-input v-model="form.legalFax" placeholder="请输入公司传真" :disabled="!canFix" />
      </a-form-model-item>

      <a-form-model-item label="所属行业" prop="legalIndustry">
        <a-tree-select
          v-model="form.legalIndustry"
          :disabled="!canFix"
          show-search
          style="width: 100%"
          :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
          placeholder="请选择所属行业"
          allow-clear
          multiple
          tree-default-expand-all
          @change="onChange"
          @search="onSearch"
          @select="onSelect"
          :tree-data="treeData['A04']"
        >
        </a-tree-select>
      </a-form-model-item>

      <a-form-model-item label="经营品目" prop="legalJingying">
        <a-tree-select
          v-model="form.legalJingying"
          :disabled="!canFix"
          show-search
          style="width: 100%"
          :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
          placeholder="请选择经营品目"
          allow-clear
          multiple
          tree-default-expand-all
          @change="onChange"
          @search="onSearch"
          @select="onSelect"
          :tree-data="treeData['A03']"
        >
        </a-tree-select>
      </a-form-model-item>

      <a-form-model-item label="网址" prop="legalWeb">
        <a-input v-model="form.legalWeb" placeholder="请输入网址" :disabled="!canFix" />
      </a-form-model-item>

      <a-form-model-item label="成立日期" prop="legalRegistDate">
        <a-date-picker
          v-model="form.legalRegistDate"
          type="date"
          placeholder="请选择成立日期"
          style="width: 100%;"
          :disabled="!canFix"
        />
      </a-form-model-item>

      <a-form-model-item label="企业上年营业额" prop="lastYearTurnover">
        <a-input
          v-model="form.lastYearTurnover"
          placeholder="请输入企业上年营业额"
          addon-after="万人民币"
          :disabled="!canFix"
        />
      </a-form-model-item>

      <a-form-model-item label="雇员人数" prop="legalEmployees">
        <!--        <a-input v-model="form.legalEmployees" placeholder="请输入雇员人数" :disabled="!canFix" />-->
        <a-select v-model="form.legalEmployees" placeholder="请选择雇员人数" :disabled="!canFix">
          <a-select-option v-for="opt in legal_type.legal_employees" :key="opt.value" :value="opt.value">{{
            opt.text
          }}</a-select-option>
        </a-select>
      </a-form-model-item>

      <a-form-model-item label="是否能开增值税发票" prop="isPiao">
        <a-radio-group v-model="form.isPiao" :disabled="!canFix">
          <a-radio value="0">是</a-radio>
          <a-radio value="1">否</a-radio>
        </a-radio-group>
      </a-form-model-item>

      <a-form-model-item label="法人资信等级" prop="creditRate">
        <a-input v-model="form.creditRate" placeholder="请输入法人资信等级" :disabled="!canFix" />
      </a-form-model-item>

      <a-form-model-item label="经营范围" prop="businessScope">
        <a-textarea
          :rows="4"
          :maxLength="1000"
          v-model="form.businessScope"
          placeholder="请输入经营范围"
          :disabled="!canFix"
        />
      </a-form-model-item>

      <a-form-model-item label="经营及业务优势介绍: (1000汉字以内)" prop="businessAdvantages">
        <a-textarea
          :rows="4"
          :maxLength="1000"
          v-model="form.businessAdvantages"
          :disabled="!canFix"
          placeholder="请输入经营及业务优势介绍"
        />
      </a-form-model-item>

      <a-form-model-item label="与本单位合作项目：(1000汉字以内)" prop="ourProjects">
        <a-textarea
          :rows="4"
          :maxLength="1000"
          v-model="form.ourProjects"
          placeholder="请输入与本单位合作项目"
          :disabled="!canFix"
        />
      </a-form-model-item>

      <a-form-model-item label="其他重要项目及客户介绍：(1000汉字以内)" prop="otherProjects">
        <a-textarea
          :rows="4"
          :maxLength="1000"
          v-model="form.otherProjects"
          :disabled="!canFix"
          placeholder="请输入其他重要项目及客户介绍"
        />
      </a-form-model-item>

      <a-form-model-item label="备注： (500汉字以内)" prop="legalRemark">
        <a-textarea
          :rows="4"
          :maxLength="1000"
          v-model="form.legalRemark"
          placeholder="请输入备注"
          :disabled="!canFix"
        />
      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<script>
import moment from 'moment'
import { axios } from '@/utils/request'
export function assignKeyToValue(data) {
  // 遍历 result 数组中的每一个元素
  data.forEach(item => {
    // 将当前项的 value 设置为 key
    item.value = item.key
    item.selectable = item.leaf

    // 如果有 children，并且 children 不为空，则递归处理 children
    if (item.children && item.children.length > 0) {
      assignKeyToValue(item.children)
    }
  })
}
export default {
  name: 'step2',
  data() {
    return {
      treeData: {},
      legal_type: {},
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
      rules: {
        legalType: [{ required: true, message: '请选择供应商/投标人/受让方类别' }],
        legalNature: [{ required: true, message: '请选择供应商/投标人/受让方性质' }],
        isForeign: [{ required: true, message: '请选择是否外资参股' }],
        isStock: [{ required: true, message: '请选择是否上市' }],
        countryRegion: [{ required: true, message: '请选择国别/地区' }],
        regCapital: [
          { required: true, message: '请输入注册资金' },
          { pattern: /^[0-9]+(\.[0-9]{1,2})?$/, message: '注册资金只能为数字', trigger: 'blur' },
        ],
        regCapCurrency: [{ required: true, message: '请选择注册资金货币类型' }],
        regRmb: [{ required: false, message: '请输入缴款当日折合人民币' }],
        regionCode: [{ required: true, message: '请选择所在地区' }],
        isImport: [{ required: false, message: '请选择是否有进出口权' }],
        legalUnitAddress: [{ required: true, message: '请输入注册地址' }],
        legalAddress: [{ required: true, message: '请输入企业办公通讯地址' }],
        legalZipCode: [{ required: true, message: '请输入邮政编码' }],
        legalFax: [{ required: false, message: '请输入公司传真' }],
        industryType: [{ required: true, type: 'array', message: '请选择所属行业' }],
        legalJingying: [{ required: true, type: 'array', message: '请选择经营品目' }],
        legalWeb: [{ required: false, message: '请输入网址' }],
        legalRegistDate: [{ required: true, message: '请选择成立日期' }],
        lastYearTurnover: [{ required: false, message: '请输入企业上年营业额' }],
        legalEmployees: [{ required: true, message: '请输入雇员人数' }],
        isPiao: [{ required: true, message: '请选择是否能开增值税发票' }],
        creditRate: [{ required: false, message: '请输入法人资信等级' }],
        businessScope: [{ required: true, message: '请输入经营范围' }],
        businessAdvantages: [{ required: true, message: '请输入经营及业务优势介绍' }],
        ourProjects: [{ required: false, message: '请输入与本单位合作项目' }],
        otherProjects: [{ required: false, message: '请输入其他重要项目及客户介绍' }],
      },

      form: {
        // 供应商/投标人/受让方类别
        legalType: [],
        // 供应商/投标人/受让方性质
        legalNature: '',
        // 是否外资参股
        isForeign: '',
        // 是否上市
        isStock: '',
        // 国别/地区
        countryRegion: '',
        // 注册资金
        regCapital: '',
        // 注册资金货币类型
        regCapCurrency: '1',
        // 缴款当日折合人民币
        regRmb: '',
        // 所在地区
        regionCode: '',
        // 是否有进出口权
        isImport: '',
        // 注册地址
        legalUnitAddress: '',
        // 企业办公通讯地址
        legalAddress: '',
        // 邮政编码
        legalZipCode: '',
        // 公司传真
        legalFax: '',
        // 所属行业
        legalIndustry: [],
        // 经营品目
        legalJingying: [],
        // 网址
        legalWeb: '',
        // 成立日期
        legalRegistDate: moment(),
        // 企业上年营业额
        lastYearTurnover: '1',
        // 雇员人数
        legalEmployees: '1',
        // 是否能开增值税发票
        isPiao: '1',
        // 法人资信等级
        creditRate: '1',
        // 经营范围
        businessScope: '1',
        // 经营及业务优势介绍
        businessAdvantages: '1',
        // 与本单位合作项目
        ourProjects: '1',
        // 其他重要项目及客户介绍
        otherProjects: '1',
        // 备注
        legalRemark: '1',
      },
    }
  },
  created() {
    this.getUserType('legal_type')
    this.getUserType('country')
    this.getUserType('money_type')
    this.getUserType('legal_employees')
    this.getTree({ async: false, pcode: 'A02' })
    this.getTree({ async: false, pcode: 'A03' })
    this.getTree({ async: false, pcode: 'A04' })
    if (this.user) {
      this.updateFormValues(this.user)
    }
  },
  props: {
    canFix: {
      type: Boolean,
    },
    // 基本类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    user: Object,
  },
  watch: {
    user: {
      handler: (newVal, oldVal) => {
        console.log(`guanli ${oldVal} to ${newVal}`)
        this.updateFormValues(newVal)
      },
    },
  },
  methods: {
    getInfo(v) {
      return axios.post('/register/subjectLegal/queryByInfo', { sysUserId: v.sysUserId }).then(r => {
        return r.result
      })
    },
    updateFormValues(r) {
      this.getInfo(r).then(newValues => {
        // 使用 Vue.set 或 this.$set 来更新 form 对象的属性
        Object.keys(this.form).forEach(key => {
          if (['legalJingying', 'legalIndustry', 'legalType'].includes(key)) {
            newValues[key] = newValues[key]?.split(',')
          }
          this.$set(this.form, key, newValues[key])
        })
      })
    },
    onChange() {},
    onSelect() {},
    onSearch() {},
    validateForm() {
      return new Promise((resolve, reject) => {
        this.$refs['form'].validate(valid => {
          if (valid) {
            resolve(this.form) // 验证通过，返回表单值
          } else {
            reject('表单验证失败') // 验证失败，返回错误信息
          }
        })
      })
    },
    getUserType(userType) {
      this.$http.get('/register/common/getDictItems/' + userType).then(r => {
        this.$set(this.legal_type, userType, r.result)
      })
    },
    getTree(userType) {
      this.$http.get('/register/common/loadTreeRoot', { params: userType }).then(r => {
        // console.log(r.result)
        assignKeyToValue(r.result)
        // console.log(r.result)
        /* this.treeData = r.result*/
        this.$set(this.treeData, userType.pcode, r.result)
      })
    },
    onSubmit() {
      // 提交表单逻辑
    },
  },
}
</script>

<style scoped>
/* 样式 */
</style>
